
<template>
<!-- 
Select选择器
当选项过多时，使用下拉菜单展示并选择内容。
:key="item.value"
:label="item.label"
:value="item.value"
 -->
<div>
    <el-select v-model="value" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        ></el-option>
    </el-select>
</div>
</template>



<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() { 
//这里存放数据
return {
    options:[{
        value:"1",
        label:"张九南"
    },
    {
        value:"2",
        label:"孟鹤堂"
    },
    {
        value:"3",
        label:"张云雷"
    },
    {
        value:"4",
        label:"杨九郎"
    }],
    value:""
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

<style lang="less" scoped>
</style>